import React from 'react';
import {Card, Row, Col, Modal} from 'antd';
import './style.less';

export default class Gallery extends React.Component {
    state = {
        currentItem : "",
        visible : false
    };
    handleOpen = (imgSrc) => {
        console.log(imgSrc);
        this.setState({
            visible: true,
            currentItem:imgSrc
        })
    };

    render() {
        const imgs = [
            ['1.png', '2.png', '3.png', '4.png', '5.png', '21.png'],
            ['6.png', '7.png', '8.png', '9.png', '10.png', '22.png'],
            ['11.png', '12.png', '13.png', '14.png', '15.png', '23.png'],
            ['16.png', '17.png', '18.png', '19.png', '20.png', '24.png'],
            ['21.png', '22.png', '23.png', '24.png', '25.png']
        ];
        const imgList = imgs.map(list => list.map((item) =>
            <Card
                key={Math.random() * 1000}
                cover={<img src={'/gallery/' + item} alt="这是一张图片"/>}
                style={{marginBottom: 10}}
                onClick={() => this.handleOpen(item)}
            >
                <Card.Meta title="React Admin" description="Hello"/>
            </Card>
        ));
        return (
            <div className="wrap">
                <Row gutter={8}>
                    <Col md={6}>
                        {imgList[0]}
                    </Col>
                    <Col md={6}>
                        {imgList[1]}
                    </Col>
                    <Col md={6}>
                        {imgList[2]}
                    </Col>
                    <Col md={6}>
                        {imgList[3]}
                    </Col>
                </Row>
                <Modal
                    visible={this.state.visible}
                    title="图片墙"
                    onCancel={()=>{
                        this.setState({
                            visible:false
                        })
                    }}
                    footer={null}
                >
                    <img src={'/gallery/' + this.state.currentItem} alt="这是一张图片" style={{width:'100%'}}/>
                </Modal>
            </div>
        )
    }
}
